<template>
  <div class="w-page w-donateItem">
    <div class="w-con">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item) in list" :key="item.id">
          <router-link :to="{path: 'donateDetail', query: {id: item.id}}" class="w-item">
            <div class="w-title flex vc hb">
              <p class="w-text">{{item.projectTitle}}</p>
              <p class="w-icon">></p>
            </div>
            <div class="w-info">{{item.introduction}}</div>
          </router-link>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { projectList } from '@/api/project'
import {
  List
} from 'vant'

export default {
  components: {
    [List.name]: List
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  methods: {
    onLoad () {
      projectList({ classId: this.$route.query.id, page: this.page }).then(response => {
        this.list.push.apply(this.list, response.data.list)
        this.loading = false
        this.finished = response.data.isLastPage
        this.page += 1
      })
    }
  }
}
</script>
<style>
  .w-donateItem .van-cell {
    margin-bottom: 12px;
    border-radius: 8px;
    padding-top: 0;
    padding-bottom: 0;
  }
</style>
<style scoped>
  .w-page {
    height: 100vh;
    width: 100vw;
    background: #E1E0DF;
  }

  .w-con {
    padding: 0 12px;
    height: 100vh;
    overflow: scroll;
    padding-top: 20px;
  }

  .w-icon {
    font-family: "宋体";
    color: #B5B5B5;
    /* font-weight: bold; */
  }

  .w-title {
    width: 100%;
    font-size: 17px;
    color: #762A2A;
    border-bottom: 1px solid #E5E5E5;
    padding-top: 14px;
    padding-bottom: 7px;
    line-height: 1;
  }

  .w-info {
    color: #7D7D7D;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .w-text {
    width: 79vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
